<template>
	<view class="article-container">
		<!-- 文章内容区域 -->
		<view class="article-content">
			<!-- 文章头部信息 -->
			<view class="article-header">
				<text class="article-title">{{article.title}}</text>
				<view class="article-meta">
					<image class="author-avatar" :src="article.avatar"></image>
					<text class="author-name">{{article.name}}</text>
					<text class="publish-date">{{article.createTime}}</text>
				</view>
				<view class="article-tags">
					<view class="tag" v-for="(tag, index) in article.tags" :key="index">{{tag}}</view>
				</view>
			</view>

			<!-- 文章主体内容 -->
			<rich-text class="article-body" :nodes="article.content"></rich-text>

			<!-- 文章图片 -->
			<view class="article-images" v-if="article.images && article.images.length > 0">
				<image class="article-image" v-for="(img, index) in article.images" :key="index" :src="img.url"
					:mode="img.mode || 'widthFix'" @click="previewImage(index)"></image>
			</view>

			<!-- 文章附加信息 -->
			<!-- <view class="article-footer">
				<view class="action-buttons">
					<view class="action-button" @click="toggleLike">
						<text class="action-icon">{{isLiked ? '❤️' : '♡'}}</text>
						<text class="action-text">{{article.likes}} 点赞</text>
					</view>
					<view class="action-button" @click="toggleCollect">
						<text class="action-icon">{{isCollected ? '★' : '☆'}}</text>
						<text class="action-text">收藏</text>
					</view>
					<view class="action-button" @click="scrollToComments">
						<text class="action-icon">💬</text>
						<text class="action-text">{{article.comments.length}} 评论</text>
					</view>
				</view>
			</view> -->

			<!-- 相关文章推荐 -->
			<view class="related-articles">
				<view class="section-title">相关推荐</view>
				<view class="related-list">
					<view class="related-item" v-for="(item, index) in relatedArticles" :key="index"
						@click="navigateToArticle(item.id)">
						<image class="related-image" :src="item.coverImage"></image>
						<view class="related-info">
							<text class="related-title">{{item.title}}</text>
							<text class="related-meta">{{item.views}}阅读 · {{item.likes}}点赞</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 评论区域 -->
			<view class="comments-section" id="comments">
				<view class="section-title">评论 ({{article.comments.length}})</view>
				<view class="comments-list" v-if="article.comments.length > 0">
					<view class="comment-item" v-for="(comment, index) in article.comments" :key="index">
						<image class="comment-avatar" :src="comment.avatar"></image>
						<view class="comment-content">
							<view class="comment-header">
								<text class="comment-name">{{comment.name}}</text>
								<text class="comment-time">{{comment.time}}</text>
							</view>
							<text class="comment-text">{{comment.content}}</text>
							<view class="comment-actions">
								<text class="comment-like" @click="likeComment(index)">
									{{comment.isLiked ? '❤️' : '♡'}} {{comment.likes}}
								</text>
								<text class="comment-reply" @click="replyToComment(comment)">回复</text>
							</view>

							<!-- 回复列表 -->
							<view class="replies-list" v-if="comment.replies && comment.replies.length > 0">
								<view class="reply-item" v-for="(reply, replyIndex) in comment.replies"
									:key="replyIndex">
									<image class="reply-avatar" :src="reply.avatar"></image>
									<view class="reply-content">
										<view class="reply-header">
											<text class="reply-name">{{reply.name}}</text>
											<text class="reply-time">{{reply.time}}</text>
										</view>
										<text class="reply-text">
											<text v-if="reply.replyTo" class="reply-to">@{{reply.replyTo}} </text>
											{{reply.content}}
										</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="no-comments" v-else>
					<text>暂无评论，快来发表您的看法吧</text>
				</view>
			</view>
		</view>

		<!-- 评论输入框 -->
		<view class="comment-input-container">
			<input class="comment-input" type="text" v-model="commentText"
				:placeholder="replyTarget ? `回复 ${replyTarget.name}` : '说说您的看法...'" confirm-type="send"
				@confirm="submitComment" />
			<view class="submit-comment" @click="submitComment">发送</view>
		</view>

		<!-- 加载中提示 -->
		<view class="loading" v-if="isLoading">
			<text class="loading-text">加载中...</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				articleId: 0,
				isLoading: true,
				article: {
					title: "",
					author: "",
					authorAvatar: "",
					date: "",
					views: 0,
					likes: 0,
					tags: [],
					content: "",
					images: [],
					comments: []
				},
				relatedArticles: [],
				isLiked: false,
				isCollected: false,
				commentText: "",
				replyTarget: null,
				globaApi: ''
			};
		},
		onLoad(options) {
			this.globaApi = getApp().globalData.baseUrl
			// 获取传递过来的文章ID
			if (options.id) {
				this.articleId = options.id;
				this.fetchArticleDetail();
			} else {
				uni.showToast({
					title: '文章ID不存在',
					icon: 'none'
				});
				setTimeout(() => {
					this.goBack();
				}, 1500);
			}
		},
		methods: {
			// 获取文章详情
			// 修改fetchArticleDetail方法
			fetchArticleDetail() {
				this.isLoading = true;

				// 模拟API请求获取文章数据
				setTimeout(() => {
					// 创建所有文章数据的映射
					const allArticles = {
						// 医生发布类型文章
						1: {
							title: "高血压患者如何科学管理饮食？",
							author: "心内科主任医师 王健",
							authorAvatar: "/static/message/message-test.jpg",
							date: "2025-03-18",
							views: 286,
							likes: 45,
							tags: ["高血压", "饮食管理", "健康生活"],
							content: "<p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>高血压是一种常见的慢性疾病，科学的饮食管理对控制血压至关重要。高血压患者应当减少钠盐摄入，每日食盐摄入量应控制在5克以下。</p><p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>增加钾的摄入也很重要，可以通过多吃蔬菜、水果来补充钾元素。钾有助于维持体内钠钾平衡，有利于降低血压。特别推荐的食物包括香蕉、土豆、菠菜等。</p><p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>控制总热量摄入，保持健康体重也是管理高血压的关键。过量的脂肪摄入会导致肥胖，加重心脏负担，应当减少高脂肪食物的摄入。</p><p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>适量饮酒或者完全戒酒对控制血压也非常重要。研究表明，过量饮酒会明显升高血压，增加心血管疾病风险。</p><p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>最后，建立规律的饮食习惯，避免暴饮暴食，保持心情愉快，适当运动，这些生活方式的改变对于高血压的控制同样重要。</p>",
							images: [{
									url: "/static/message/message-test.jpg",
									mode: "widthFix"
								},
								{
									url: "/static/message/message-test.jpg",
									mode: "widthFix"
								}
							],
							comments: [{
									name: "张先生",
									avatar: "/static/message/message-test.jpg",
									time: "2025-03-19 08:23",
									content: "非常实用的建议，我母亲是高血压患者，这些饮食建议对她很有帮助！",
									likes: 5,
									isLiked: false,
									replies: [{
										name: "王医生",
										avatar: "/static/message/message-test.jpg",
										time: "2025-03-19 10:45",
										content: "感谢您的反馈，如有任何疑问可以随时咨询我们的专业医生。",
										replyTo: "张先生"
									}]
								},
								{
									name: "李女士",
									avatar: "/static/message/message-test.jpg",
									time: "2025-03-19 15:37",
									content: "请问医生，如果已经在服用降压药，饮食上还需要这么严格控制吗？",
									likes: 3,
									isLiked: false,
									replies: []
								}
							]
						},
						2: {
							title: "术后康复注意事项：这些误区一定要避开",
							author: "骨科主治医师 李娜",
							authorAvatar: "/static/message/message-test.jpg",
							date: "2025-03-16",
							views: 192,
							likes: 38,
							tags: ["术后康复", "骨科", "康复误区"],
							content: "<p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>手术后的康复对患者恢复至关重要，但很多患者在术后康复中常常会进入一些误区。首先，最常见的误区是认为卧床越久越好。事实上，除非医生特别嘱咐，大多数手术后应该在安全的前提下尽早适当活动，这有助于促进血液循环、预防血栓形成和肺部感染。</p><p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>另一个误区是伤口越干越好。很多患者担心伤口感染，会刻意保持伤口干燥。其实现代医学认为，适度湿润的伤口环境更有利于愈合。遵循医嘱进行伤口护理，不要随意更换敷料或自行处理伤口。</p><p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>第三个误区是疼痛是必须忍受的。疼痛会影响康复进程，适当的疼痛管理非常重要。患者应按照医嘱服用止痛药，不要因为担心 成瘾而拒绝止痛。</p><p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>饮食方面，许多患者认为手术后应该进补大补，但过度补充营养反而会增加消化系统负担。 术后饮食应当清淡易消化， 富含蛋白质和维生素， 分次少量进食" +
								"</p><p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>最后，康复训练不能操之过急，应在专业医护人员指导下循序渐进，避免过度训练造成二次伤害。每个患者的情况不同，康复计划应该个体化，不要盲目跟风或自行判断。</p >",
							images: [{
								url: "/static/message/message-test.jpg",
								mode: "widthFix"
							}],
							comments: [{
									name: "王先生",
									avatar: "/static/message/message-test.jpg",
									time: "2025-03-17 09:42",
									content: "我上个月做了腰椎手术，医生建议我早点下床活动，开始还担心影响恢复，现在看来是正确的做法。",
									likes: 8,
									isLiked: false,
									replies: [{
										name: "李医生",
										avatar: "/static/message/message-test.jpg",
										time: "2025-03-17 11:15",
										content: "是的，适当活动对腰椎术后康复非常有益，祝您早日康复！",
										replyTo: "王先生"
									}]
								},
								{
									name: "张女士",
									avatar: "/static/message/message-test.jpg",
									time: "2025-03-17 14:22",
									content: "请问骨折手术后多久可以洗澡？伤口要如何护理？",
									likes: 5,
									isLiked: false,
									replies: []
								}
							]
						},
						// 医院动态类型文章
						3: {
							title: "我院引进最新达芬奇手术机器人系统",
							author: "医院新闻中心",
							authorAvatar: "/static/message/message-test.jpg",
							date: "2025-03-15",
							views: 543,
							likes: 78,
							tags: ["医疗设备", "微创手术", "医院动态"],
							content: "<p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>为进一步提升医院手术治疗水平，我院于2025年3月成功引进了新一代达芬奇Xi手术机器人系统。该系统是目前国际上最先进的微创手术平台之一，将大幅提高我院在复杂外科手术领域的诊疗能力。</p><p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>达芬奇Xi手术机器人系统具有更高的灵活性和精准度，能够辅助医生完成更复杂的微创手术。系统配备了高清3D成像系统，使医生能够看到更清晰的手术视野；同时，机器人的手臂,比人手更加稳定精准，可以在狭小空间内进行灵活操作。</p><p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>目前，达芬奇手术机器人已在我院泌尿外科、胸外科、普外科等多个科室投入使用。相比传统开放手术，机器人辅助手术具有创伤小、恢复快、并发症少等优点，将为患者提供更优质的医疗服务。</p><p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>我院已组建专业的机器人手术团队，并邀请国内外顶尖专家进行技术指导和培训。未来，我院将继续加大医疗设备投入，引进先进技术，不断提升医疗服务水平。</p>",
							images: [{
									url: "/static/message/message-test.jpg",
									mode: "widthFix"
								},
								{
									url: "/static/message/message-test.jpg",
									mode: "widthFix"
								},
								{
									url: "/static/message/message-test.jpg",
									mode: "widthFix"
								}
							],
							comments: [{
									name: "刘医生",
									avatar: "/static/message/message-test.jpg",
									time: "2025-03-16 09:12",
									content: "这是医院发展的重要里程碑，为我们的外科手术提供了更多可能性！",
									likes: 12,
									isLiked: false,
									replies: []
								},
								{
									name: "赵先生",
									avatar: "/static/message/message-test.jpg",
									time: "2025-03-17 14:25",
									content: "请问这种机器人手术的费用大概是多少？医保能报销吗？",
									likes: 8,
									isLiked: false,
									replies: [{
										name: "医院客服",
										avatar: "/static/message/message-test.jpg",
										time: "2025-03-17 16:30",
										content: "您好，机器人手术费用视具体手术类型而定，部分项目已纳入医保报销范围。建议您到院咨询或拨打我院客服电话了解详情。",
										replyTo: "赵先生"
									}]
								}
							]
						},
						4: {
							title: "春季健康公益讲座：关爱女性乳腺健康",
							author: "院办宣传科",
							authorAvatar: "/static/message/message-test.jpg",
							date: "2025-03-12",
							views: 317,
							likes: 52,
							tags: ["健康讲座", "乳腺健康", "女性健康"],
							content: "<p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>为提高女性健康意识，普及乳腺疾病防治知识，我院将于2025年3月25日举办关爱女性乳腺健康公益讲座。本次讲座邀请了我院乳腺科主任张彤教授担任主讲，将为广大女性朋友带来专业、实用的乳腺健康知识。</p><p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>讲座内容涵盖乳腺疾病基本知识、乳腺癌筛查方法、乳腺自检技巧、乳腺疾病预防等多个方面。张主任将结合临床案例，以通俗易懂的语言讲解乳腺健康的重要性，帮助女性朋友树立科学的乳腺保健观念。</p><p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>讲座现场还将设置专家咨询环节，参与者可以向专家提问，获得个性化的健康指导。同时，我院将为参与讲座的女性朋友提供免费乳腺健康咨询和乳腺自检指导。</p><p style=" +
								"'margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>讲座地点位于医院门诊大楼三楼多功能厅，时间为3月25日上午9:00-11:00。参与讲座无需费用，但需提前报名。有意参加的女性朋友可拨打医院公益热线或通过医院公众号进行预约报名。</p>",
							images: [{
								url: "/static/message/message-test.jpg",
								mode: "widthFix"
							}],
							comments: [{
									name: "林女士",
									avatar: "/static/message/message-test.jpg",
									time: "2025-03-13 10:28",
									content: "这类健康讲座真的很有意义，我一定会参加。请问有没有线上直播？",
									likes: 10,
									isLiked: false,
									replies: [{
										name: "医院宣传科",
										avatar: "/static/message/message-test.jpg",
										time: "2025-03-13 11:42",
										content: "您好，本次讲座将在医院公众号同步直播，欢迎线上观看并互动。",
										replyTo: "林女士"
									}]
								},
								{
									name: "陈女士",
									avatar: "/static/message/message-test.jpg",
									time: "2025-03-14 16:05",
									content: "我妈妈60岁了，最近很担心乳腺问题，想带她一起来听讲座，需要两个人都预约吗？",
									likes: 6,
									isLiked: false,
									replies: []
								}
							]
						},
						// 健康新闻类型文章
						5: {
							title: "最新研究：每天快走30分钟可降低心血管疾病风险",
							author: "健康时报",
							authorAvatar: "/static/message/message-test.jpg",
							date: "2025-03-20",
							views: 895,
							likes: 120,
							tags: ["心血管健康", "运动", "健康生活方式"],
							content: "<p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>据《医学科学前沿》最新发表的一项大型研究显示，每天进行30分钟快走等中等强度有氧运动，可以显著降低心血管疾病风险。该研究历时10年，追踪调查了超过20万名35-75岁的成年人。</p><p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>研究发现，坚持每天快走30分钟的人群，心脏病发作风险降低了27%，中风风险降低了25%，总体心血管疾病风险降低约30%。这一效果在中老年人群中尤为明显。</p><p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>专家解释，适度有氧运动能够改善血液循环，降低血压，减少血管内壁炎症，提高心肺功能，从而降低心血管疾病风险。与高强度运动相比，中等强度的快走更容易坚持，也更适合大多数人。" +
								"</p><p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>研究还指出，即使将30分钟的运动时间分散为每次10分钟、每天3次，效果也基本相当。这对于工作繁忙的现代人来说是一个好消息。</p><p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>专家建议，除了快走外，游泳、骑自行车等其他中等强度有氧运动也能达到类似效果。重要的是保持运动习惯的持续性和规律性。</p>",
							images: [{
								url: "/static/message/message-test.jpg",
								mode: "widthFix"
							}],
							comments: [{
									name: "王女士",
									avatar: "/static/message/message-test.jpg",
									time: "2025-03-21 07:45",
									content: "每天快走确实很有效，我坚持了半年，血压明显稳定了很多！",
									likes: 15,
									isLiked: false,
									replies: []
								},
								{
									name: "陈先生",
									avatar: "/static/message/message-test.jpg",
									time: "2025-03-21 10:18",
									content: "请问专家，如果天气不好或者没有合适的场地，在室内走跑步机效果一样吗？",
									likes: 7,
									isLiked: false,
									replies: [{
										name: "健康顾问",
										avatar: "/static/message/message-test.jpg",
										time: "2025-03-21 11:30",
										content: "在跑步机上行走的效果与户外快走基本相当，建议适当调整坡度以模拟自然行走状态。室内运动时要注意保持通风。",
										replyTo: "陈先生"
									}]
								}
							]
						},
						6: {
							title: "世界睡眠日特别报道：如何改善失眠问题",
							author: "健康科普小组",
							authorAvatar: "/static/message/message-test.jpg",
							date: "2025-03-19",
							views: 678,
							likes: 89,
							tags: ["睡眠健康", "失眠", "世界睡眠日"],
							content: "<p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>3月21日是世界睡眠日，今年的主题是健康睡眠， 健康未来。睡眠质量与身心健康密切相关，但现代生活节奏快、压力大，失眠问题日益普遍。据调查，全球约有三分之一的人存在不同程度的睡眠障碍。</p><p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>专家指出，改善睡眠首先要养成规律的作息习惯。尽量在固定时间睡觉和起床，包括周末。这有助于调整人体生物钟，提高睡眠质量。睡前应避免使用电子产品，蓝光会抑制褪黑素分泌，影响入睡。</p><p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>睡眠环境也非常重要。卧室应保持安静、舒适、黑暗，温度以18-22℃为宜。使用舒适的床垫和枕头，有助于提高睡眠质量。</p><p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>" +
								"饮食习惯同样影响睡眠。睡前4-6小时避免摄入咖啡因，包括咖啡、茶、巧克力和某些软饮料。晚餐不宜过饱或过晚，睡前可适量喝杯温牛奶或蜂蜜水有助于入睡。</p><p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>白天适当运动有利于夜间睡眠，但应避免睡前3小时内进行剧烈运动。睡前可以进行放松活动，如冥想、深呼吸、瑜伽或渐进式肌肉放松训练，有助于缓解压力，促进入睡。</p><p style='margin-bottom: 15px; text-indent: 2em; line-height: 1.8;'>如果失眠问题严重影响生活质量，应及时咨询专业医生，接受科学评估和治疗。不要自行滥用安眠药，这可能导致药物依赖和其他健康问题。</p>",
							images: [{
									url: "/static/message/message-test.jpg",
									mode: "widthFix"
								},
								{
									url: "/static/message/message-test.jpg",
									mode: "widthFix"
								}
							],
							comments: [{
									name: "郑先生",
									avatar: "/static/message/message-test.jpg",
									time: "2025-03-19 20:15",
									content: "我一直有失眠问题，试了很多方法都没有效果。最近开始冥想，确实有所改善。",
									likes: 11,
									isLiked: false,
									replies: []
								},
								{
									name: "黄女士",
									avatar: "/static/message/message-test.jpg",
									time: "2025-03-20 09:27",
									content: "请问有没有推荐的助眠APP或音乐？我很难放松下来。",
									likes: 8,
									isLiked: false,
									replies: [{
										name: "睡眠专家",
										avatar: "/static/message/message-test.jpg",
										time: "2025-03-20 11:42",
										content: "您可以尝试一些白噪音或自然声音APP，如雨声、海浪声等。也有专门的引导式冥想APP可以帮助放松。重要的是找到适合自己的方式。",
										replyTo: "黄女士"
									}]
								}
							]
						}
					};

					// 根据传递的ID获取对应的文章
					uni.request({
						url: `${this.globaApi}/article/getArticleById`,
						method: 'POST',
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
						},
						data: {
							id: this.articleId
						},
						success: (res) => {
							if (res.data.code === 200) {
								this.article = res.data.data;
								console.log(this.article);
							} else {
								uni.showToast({
									title: '获取文章失败',
									icon: 'none'
								});
							}
						},
						fail: () => {
							uni.showToast({
								title: '网络错误，请稍后重试',
								icon: 'none'
							});
						}
					});

					// 模拟加载相关文章
					this.relatedArticles = [{
							id: "related1",
							title: "健康生活方式对慢性病管理的重要性",
							coverImage: "/static/message/1-1.png",
							views: 432,
							likes: 67
						},
						{
							id: "related2",
							title: "长期久坐的危害及如何科学预防",
							coverImage: "/static/message/1-2.png",
							views: 356,
							likes: 41
						},
						{
							id: "related3",
							title: "春季常见疾病预防指南",
							coverImage: "/static/message/1-3.png",
							views: 289,
							likes: 38
						}
					]

					this.isLoading = false;
				}, 800);
			},

			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},

			// 分享文章
			shareArticle() {
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline']
				});
			},

			// 点赞文章
			toggleLike() {
				this.isLiked = !this.isLiked;
				if (this.isLiked) {
					this.article.likes++;
				} else {
					this.article.likes--;
				}

				uni.showToast({
					title: this.isLiked ? '已点赞' : '已取消点赞',
					icon: 'none'
				});
			},

			// 收藏文章
			toggleCollect() {
				this.isCollected = !this.isCollected;

				uni.showToast({
					title: this.isCollected ? '已收藏' : '已取消收藏',
					icon: 'none'
				});
			},

			// 预览图片
			previewImage(index) {
				const urls = this.article.images.map(img => img.url);
				uni.previewImage({
					current: urls[index],
					urls: urls
				});
			},

			// 点赞评论
			likeComment(index) {
				const comment = this.article.comments[index];
				comment.isLiked = !comment.isLiked;
				if (comment.isLiked) {
					comment.likes++;
				} else {
					comment.likes--;
				}
			},

			// 回复评论
			replyToComment(comment) {
				this.replyTarget = {
					name: comment.name,
					id: comment.id
				};
				// 聚焦到评论输入框
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.comment-input').boundingClientRect(data => {
						uni.pageScrollTo({
							scrollTop: data.top,
							duration: 300
						});
					}).exec();
				});
			},

			// 提交评论
			submitComment() {
				if (!this.commentText.trim()) {
					uni.showToast({
						title: '评论内容不能为空',
						icon: 'none'
					});
					return;
				}

				// 模拟提交评论
				const now = new Date();
				const timeString =
					`${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;

				if (this.replyTarget) {
					// 回复评论
					const targetComment = this.article.comments.find(comment => comment.id === this.replyTarget.id);
					if (targetComment) {
						if (!targetComment.replies) {
							targetComment.replies = [];
						}

						targetComment.replies.push({
							name: "我",
							avatar: "/static/message/message-test.jpg",
							time: timeString,
							content: this.commentText,
							replyTo: this.replyTarget.name
						});
					}

					this.replyTarget = null;
				} else {
					// 发表新评论
					this.article.comments.unshift({
						name: "我",
						avatar: "/static/message/message-test.jpg",
						time: timeString,
						content: this.commentText,
						likes: 0,
						isLiked: false,
						replies: []
					});
				}

				this.commentText = "";

				uni.showToast({
					title: '评论成功',
					icon: 'success'
				});
			},

			// 滚动到评论区
			scrollToComments() {
				uni.createSelectorQuery().select('#comments').boundingClientRect(data => {
					uni.pageScrollTo({
						scrollTop: data.top,
						duration: 300
					});
				}).exec();
			},

			// 跳转到相关文章
			navigateToArticle(id) {
				uni.navigateTo({
					url: `/pages/article/detail?id=${id}`
				});
			}
		}
	}
</script>

<style>
	.article-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 100rpx;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
		position: sticky;
		top: 0;
		z-index: 100;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.back-button,
	.share-button {
		padding: 10rpx 20rpx;
	}

	.back-icon {
		font-size: 40rpx;
	}

	.nav-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.share-icon {
		font-size: 28rpx;
		color: #3399ff;
	}

	.article-content {
		background-color: #ffffff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.article-header {
		margin-bottom: 30rpx;
	}

	.article-title {
		font-size: 40rpx;
		font-weight: bold;
		line-height: 1.4;
		margin-bottom: 20rpx;
	}

	.article-meta {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.author-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
		margin-right: 15rpx;
	}

	.author-name {
		font-size: 28rpx;
		color: #333;
		margin-right: 20rpx;
	}

	.publish-date,
	.read-count {
		font-size: 24rpx;
		color: #999;
		margin-right: 20rpx;
	}

	.article-tags {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 30rpx;
	}

	.tag {
		background-color: #f0f7ff;
		color: #3399ff;
		font-size: 24rpx;
		padding: 6rpx 20rpx;
		border-radius: 30rpx;
		margin-right: 15rpx;
		margin-bottom: 10rpx;
	}

	.article-body {
		font-size: 30rpx;
		line-height: 1.8;
		color: #333;
		margin-bottom: 30rpx;
	}

	.article-images {
		margin-bottom: 30rpx;
	}

	.article-image {
		width: 100%;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
	}

	.article-footer {
		border-top: 1rpx solid #eee;
		padding-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.action-buttons {
		display: flex;
		justify-content: space-around;
	}

	.action-button {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.action-icon {
		font-size: 40rpx;
		margin-bottom: 10rpx;
	}

	.action-text {
		font-size: 24rpx;
		color: #666;
	}

	.related-articles {
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 34rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		position: relative;
		padding-left: 20rpx;
	}

	.section-title::before {
		content: '';
		position: absolute;
		left: 0;
		top: 10rpx;
		height: 30rpx;
		width: 6rpx;
		background-color: #3399ff;
		border-radius: 3rpx;
	}

	.related-list {
		display: flex;
		flex-direction: column;
	}

	.related-item {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.related-image {
		width: 180rpx;
		height: 120rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.related-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.related-title {
		font-size: 28rpx;
		font-weight: bold;
		line-height: 1.4;
		margin-bottom: 10rpx;
	}

	.related-meta {
		font-size: 24rpx;
		color: #999;
	}

	.comments-section {
		background-color: #ffffff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.comments-list {
		margin-top: 20rpx;
	}

	.comment-item {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.comment-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		margin-right: 20rpx;
	}

	/* 这部分是已有的CSS */
	.article-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 100rpx;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
		position: sticky;
		top: 0;
		z-index: 100;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.back-button,
	.share-button {
		padding: 10rpx 20rpx;
	}

	.back-icon {
		font-size: 40rpx;
	}

	.nav-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.share-icon {
		font-size: 28rpx;
		color: #3399ff;
	}

	.article-content {
		background-color: #ffffff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.article-header {
		margin-bottom: 30rpx;
	}

	.article-title {
		font-size: 40rpx;
		font-weight: bold;
		line-height: 1.4;
		margin-bottom: 20rpx;
	}

	.article-meta {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.author-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
		margin-right: 15rpx;
	}

	.author-name {
		font-size: 28rpx;
		color: #333;
		margin-right: 20rpx;
	}

	.publish-date,
	.read-count {
		font-size: 24rpx;
		color: #999;
		margin-right: 20rpx;
	}

	.article-tags {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 30rpx;
	}

	.tag {
		background-color: #f0f7ff;
		color: #3399ff;
		font-size: 24rpx;
		padding: 6rpx 20rpx;
		border-radius: 30rpx;
		margin-right: 15rpx;
		margin-bottom: 10rpx;
	}

	.article-body {
		font-size: 30rpx;
		line-height: 1.8;
		color: #333;
		margin-bottom: 30rpx;
	}

	.article-images {
		margin-bottom: 30rpx;
	}

	.article-image {
		width: 100%;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
	}

	.article-footer {
		border-top: 1rpx solid #eee;
		padding-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.action-buttons {
		display: flex;
		justify-content: space-around;
	}

	.action-button {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.action-icon {
		font-size: 40rpx;
		margin-bottom: 10rpx;
	}

	.action-text {
		font-size: 24rpx;
		color: #666;
	}

	.related-articles {
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 34rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		position: relative;
		padding-left: 20rpx;
	}

	.section-title::before {
		content: '';
		position: absolute;
		left: 0;
		top: 10rpx;
		height: 30rpx;
		width: 6rpx;
		background-color: #3399ff;
		border-radius: 3rpx;
	}

	.related-list {
		display: flex;
		flex-direction: column;
	}

	.related-item {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.related-image {
		width: 180rpx;
		height: 120rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.related-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.related-title {
		font-size: 28rpx;
		font-weight: bold;
		line-height: 1.4;
		margin-bottom: 10rpx;
	}

	.related-meta {
		font-size: 24rpx;
		color: #999;
	}

	.comments-section {
		background-color: #ffffff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.comments-list {
		margin-top: 20rpx;
	}

	.comment-item {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.comment-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		margin-right: 20rpx;
	}

	/* 下面是补充的CSS样式 */
	.comment-content {
		flex: 1;
	}

	.comment-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.comment-name {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.comment-time {
		font-size: 24rpx;
		color: #999;
	}

	.comment-text {
		font-size: 28rpx;
		line-height: 1.6;
		color: #333;
		margin-bottom: 10rpx;
	}

	.comment-actions {
		display: flex;
		margin-top: 10rpx;
	}

	.comment-like,
	.comment-reply {
		font-size: 24rpx;
		color: #666;
		margin-right: 30rpx;
	}

	.replies-list {
		margin-left: 20rpx;
		margin-top: 15rpx;
		padding-left: 20rpx;
		border-left: 2rpx solid #eee;
	}

	.reply-item {
		display: flex;
		padding: 15rpx 0;
	}

	.reply-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
		margin-right: 15rpx;
	}

	.reply-content {
		flex: 1;
	}

	.reply-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 6rpx;
	}

	.reply-name {
		font-size: 26rpx;
		font-weight: bold;
		color: #333;
	}

	.reply-time {
		font-size: 22rpx;
		color: #999;
	}

	.reply-text {
		font-size: 26rpx;
		line-height: 1.5;
		color: #333;
	}

	.reply-to {
		color: #3399ff;
	}

	.no-comments {
		text-align: center;
		padding: 40rpx 0;
		color: #999;
		font-size: 28rpx;
	}

	.comment-input-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
		box-shadow: 0 -2rpx 6rpx rgba(0, 0, 0, 0.1);
		z-index: 99;
	}

	.comment-input {
		flex: 1;
		height: 70rpx;
		background-color: #f5f5f5;
		border-radius: 35rpx;
		padding: 0 25rpx;
		font-size: 28rpx;
	}

	.submit-comment {
		width: 120rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #ffffff;
		background-color: #3399ff;
		border-radius: 35rpx;
		margin-left: 20rpx;
		font-size: 28rpx;
	}

	.loading {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(255, 255, 255, 0.8);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.loading-text {
		font-size: 30rpx;
		color: #666;
	}
</style>